/** * Create by mzq * Description: 修改密码弹框 * Date: 2025/2/10 17:17 *
Update: 2025/2/10 17:17 */

<template>
  <MyDiaLog :visible="visible" :titleName="titleName" @close="handleClose">
    <template>
      <div class="password-form">
        <div class="form-item">
          <div class="label">请设置新密码：</div>
          <div class="input-wrapper">
            <input
              type="password"
              v-model="newPassword"
              class="input"
              placeholder="请输入新密码" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">请确认新密码：</div>
          <div class="input-wrapper">
            <input
              type="password"
              v-model="confirmPassword"
              class="input"
              placeholder="请再次输入新密码" />
          </div>
        </div>
        <div class="buttons">
          <div>
            <fui-button
              :bold="true"
              @click="handleClose"
              radius="5rpx"
              background="#E9E9E9"
              color="#000000"
              width="80px"
              >取消
            </fui-button>
          </div>
          <div style="margin-left: 10px">
            <fui-button
              :bold="true"
              @click="submitBtn"
              radius="5rpx"
              width="80px"
              background="#6DF7BE"
              color="#000000"
              >确定
            </fui-button>
          </div>
        </div>
      </div>
    </template>
  </MyDiaLog>
</template>

<script>
import MyDiaLog from '@/components/MyDiaLog/MyDiaLog.vue'
import FuiButton from '@/components/firstui/fui-button/fui-button.vue'
import { toast } from '@/utils'
import { mapState, mapMutations, mapActions } from 'vuex'
import { readJsonFromFile, updateJsonById } from '@/utils/fileUtil'

export default {
  name: 'ChangePassword',
  components: { FuiButton, MyDiaLog },
  data() {
    return {
      visible: true,
      titleName: '修改密码',
      newPassword: '',
      confirmPassword: '',
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    submitBtn() {
      // 验证两次密码是否一致
      if (!this.newPassword || !this.confirmPassword) {
        return toast('请输入密码')
      }
      if (this.newPassword !== this.confirmPassword) {
        return toast('两次输入的密码不一致')
      }

      // TODO: 这里添加修改密码的接口调用
      console.log('新密码：', this.newPassword)
      console.log('确认密码：', this.userInfo.id)
      // 读取文件
      let res2 = readJsonFromFile('/sdcard/test/user.json')
      console.log(res2)
      const success = updateJsonById(
        this.userInfo.id,
        {
          password: this.newPassword
        },
        "/sdcard/test/user.json"
      );

      setTimeout(() =>{
        let res3 = readJsonFromFile('/sdcard/test/user.json')
        console.log(res3)
      },100)


      // 发送成功事件
      this.$emit('success')
      // 关闭弹窗
      this.handleClose()
    },
  },
  computed: {
    ...mapState(['userInfo'])
  },
}
</script>

<style scoped lang="scss">
.password-form {
  padding: 20px;
  width: 400px;

  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .label {
      width: 120px;
      text-align: right;
      padding-right: 10px;
      font-size: 14px;
      color: #333;
      white-space: nowrap;
    }

    .input-wrapper {
      flex: 1;
      max-width: 200px;

      .input {
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;

        &:focus {
          border-color: #409eff;
          outline: none;
        }
      }
    }
  }

  .buttons {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中对齐按钮 */
    margin-top: 20px; /* 根据需要添加顶部外边距 */
  }
}
</style>
